<template>
  <div class="admin">
    <!-- container -->
    <el-container class="ad-container">
      <!-- header -->
      <el-header height="60px" class="ad-header sha1 clear-ed">
        <index-header></index-header>
      </el-header>

      <el-container style="min-width: 1000px; background: #FBFBFB;">
        <!-- aside -->
        <el-aside width="200px" class="ad-aside sha2">
          <el-row class="margin-top-20">
            <el-col :span="24"
              class="ad-creat">
                <el-button
                  @click.stop="onShowCreateSiteDialog"
                  class="ad-creat-btn">
                    <i class="jy-icon-creation"></i>
                    创建作品
                </el-button>
            </el-col>
          </el-row>
          <el-menu :default-active="activeIndex">
            <el-menu-item v-show="item.bIsShow" v-for="(item, index) in menuList"
              :key="index"
              :index="item.index"
              :data-key="index"
              class="ad-op"
              @click="clickOption($event, item)">
              <!-- <i :class="item.icon"></i> -->
              <el-icon><component :is="item.icon"/></el-icon>
              <span>{{item.text}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- main -->
        <el-main class="ad-content scroll-bar-cls clear-ed">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 创建什么类型的页面？ -->
    <el-dialog title="创建什么类型的页面？" v-model="isDisplayCreateSite" top="25vh">
      <ul class="create-site-con">
        <li v-if="true" @click.stop="onCreateSite(H5_TYPE.mobile)"><i class="jy-icon-multiple-page"></i><p>移动端页面</p></li>
        <li v-if="true" @click.stop="onCreateSite(H5_TYPE.pc)"><i class="jy-icon-single-page"></i><p>PC端页面</p></li>
        <!-- <li @click.stop="onCreateSite(H5_TYPE.canvas)"><i class="jy-icon-single-page"></i><p>canvas页面</p></li> -->
        <li v-if="bIsCardCreatable" @click.stop="onCreateCardSite(H5_TYPE.card)"><i class="jy-icon-wall"></i><p>CardList页面</p></li>
      </ul>
    </el-dialog>

    <!-- site-preview -->
    <site-preview :isVisible="isSitePreview"></site-preview>
    <site-preview-card :isVisible="isSitePreviewCardShow"></site-preview-card>

    <!-- 你确认删除整个站点数据吗？ -->
    <el-dialog
      title="提示"
      v-model="deleteSiteData.isDelete"
      width="30%"
      :show-close="false">
      <span>你确认删除整个站点数据吗？</span>
      <template #footer>
        <span class="dialog-footer delete-site-data">
          <el-button @click.stop.prevent="onCancelDeleteSiteData">取 消</el-button>
          <el-button type="primary" @click.stop.prevent="onDeleteSiteData">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import IndexHeader from '@/views/child/header/IndexHeader.vue'
  import SitePreview from '@/views/child/SitePreview.vue'
  import SitePreviewCard from '@/views/child/SitePreviewCard.vue'

  import { mapActions, mapState } from 'vuex'
  import { reactive } from 'vue'
  import { EventBus } from '@/store/index'
  import { H5_TYPE } from '@/common/const-dif'
  import { getPxOVwByValue } from '@/store/utils'

  export default {
    name: 'admin',
    components: {
      IndexHeader,
      SitePreview,
      SitePreviewCard,
    },
    setup () {
      const state =  reactive({
        activeIndex: "1",
        bIsSubOpen: true,
        isDisplayCreateSite: false,
        /* 创建页面类型按钮 bIsShow */
        bIsCardCreatable: false,  // card create btn
      })
      const state_ = {
        H5_TYPE: H5_TYPE,
        adminType: 'ADMINPRODU',
        menuList: [
          {
            icon: 'document',
            index: '1',
            type: 'ADMINPRODU',
            text: '我的作品',
            router: '/admin/produ',
            bIsShow: true,
          },
          {
            icon: 'menu',
            index: '2',
            type: 'ADMINTEMP',
            text: '模板列表',
            router: '/admin/temp',
            bIsShow: true,
          },
          {
            icon: 'star',
            index: '3',
            type: 'ADMINCOLLECT',
            text: '我的收藏',
            router: '/admin/collect',
            bIsShow: false,
          },
          {
            icon: 'view',
            index: '4',
            type: 'ADMINDATA',
            text: '数据统计',
            router: '/admin/data',
            bIsShow: true,
          },
          {
            // 管理员/开发者可见
            icon: 'calendar',
            index: '5',
            type: 'ADMINRECORD',
            text: '更新记录',
            router: '',
            link: 'http://git.intra.xxx.com/wbcsc_xm/fe/fe-web/wikis/新建页更新记录',
            bIsShow: false,
          }
        ],
      }
      _.merge(state, state_)
      return state
    },
    computed: {
      ...mapState({
        isSitePreview: (state) => state.user.sitePreview.isActive,
        isSitePreviewCardShow: state => state.cardComponents.mgSitePreview.isActive,
        deleteSiteData: (state) => state.deleteSiteData,
        group: (state) => state.user.user.group,
      })
    },
    mounted() {
      // height
      this.handleResize();
      window.addEventListener('resize', this.handleResize, false);

      // this.clickOption();
      EventBus.$off("changeAdminTab")
      EventBus.$on("changeAdminTab", this.changeTab)

      // 初始化获取router 并 set activeIndex
      this.handleRouter4ActiveIndex();
    },
    methods: {
      ...mapActions({
        createSite: "components/createSite",
        deleteSite: "user/deleteSite",
        createCardSite: "cardComponents/createCardSite",
      }),
      onCancelDeleteSiteData(){
        this.$store.commit("updateDeleteSiteData", { isDelete: false, site_id: ''})
      },
      onDeleteSiteData(){
        let site_id = this.deleteSiteData.site_id
        this.$store.commit("updateDeleteSiteData", { isDelete: false, site_id: ''})

        let params = {site_id};
        this.deleteSite(params);
      },
      changeTab(option){
        //option: { type, site_id }

        this.$router.push({
          path: `/admin/data/${option.site_id}`,
          query: {
            site_id: option.site_id
          }
        });

        // let index = ''
        // _.forEach(this.menuList, (menu) => {
        //   if(menu.type == type){
        //     index = menu.index
        //   }
        // });
        // this.adminType = type;
        // this.$nextTick(() => {
        //   this.activeIndex = index;
        //   EventBus.$emit("showSiteStatics", { site_id })
        // })
      },
      clickOption(el, item) {
        let that = this;
        that.adminType = item.type;

        // 无 router 则跳 link
        if(typeof item.router != 'string' || item.router == '') {
          window.location.href = item.link;
          return;
        }
        if(this.$route.path !== item.router) {
          this.$router.push(item.router);
        }

      },
      onShowCreateSiteDialog() {
        this.isDisplayCreateSite = true;
      },
      onCreateSite(type){
        this.createSite({type, $router: this.$router});
      },
      click2Home() {
        // console.log("home: ", el, this.$store);
        // this.$store.dispatch("components/upload");
        window.location.href = "/home";
      },
      click2ShowSub(el) {
        let that = this;
        let parentEl = el.currentTarget.parentNode;
        // console.log("submenu: ", parentEl.className.indexOf("is-opened"));
        let bIsOpened = parentEl.className.indexOf("is-opened") > -1;
        if(bIsOpened) {
          // todo: close
          that.bIsSubOpen = !that.bIsSubOpen;
        }
        else {
          // todp: open
          that.bIsSubOpen = !that.bIsSubOpen;
        }
      },
      handleRouter4ActiveIndex() {
        const _herf = window.location.href;
        if(_herf.indexOf('/admin/produ') > -1) {
          this.activeIndex = '1';
        }
        else if(_herf.indexOf('/admin/temp') > -1) {
          this.activeIndex = '2';
        }
        else if(_herf.indexOf('/admin/collect') > -1) {
          this.activeIndex = '3';
        }
        else if(_herf.indexOf('/admin/data') > -1) {
          this.activeIndex = '4';
        }
      },

      /* by group */
      // group 类型 1/2/3
      updateMenuShowByGroup() {
        // 根据 user.group 更新 this.menuList 是否展示
        // 管理员/开发者可见
        this.menuList[4].bIsShow = this.group == 1;
      },
      updateCreateBtnShowByGroup() {
        // 根据 user.group 更新 创建页面类型按钮 是否展示
        this.bIsCardCreatable = this.group == 1 || this.group == 3;
      },

      onCreateCardSite(type) {  /** 创建 cardlist 站点 **/
        // create cardlist site
        this.createCardSite({
          type: type,  // H5_TYPE
        });
      },

      /*  */
      handleResize() {
        let win_Height = window.innerHeight || Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        const elContent = document.querySelector('.ad-content');
        const elHeader = document.querySelector('.index-header-layout');
        if (elHeader && elContent) {
          elContent.style.height = getPxOVwByValue(win_Height - elHeader.offsetHeight);
        }
      },
    },
    watch: {
      '$route.path'() {
        // 监听router变化 并 set activeIndex
        this.handleRouter4ActiveIndex();

        // // 可视化展示组件点击数 set state.isDisplayClickStatics
        // let isDisplayClickStatics = false
        // if(to.indexOf('/admin/data') > -1){
        //   isDisplayClickStatics = true
        // }else{
        //   isDisplayClickStatics = false
        // }
        // this.$store.commit("user/updataIsDisplayClickStatics", {isDisplayClickStatics})
      },
      group: {
        immediate: true,
        handler() {
          // 根据 user.group 更新 this.menuList 是否展示
          this.updateMenuShowByGroup();

          // 根据 user.group 更新 创建页面类型按钮 是否展示
          this.updateCreateBtnShowByGroup();
        },
      },
    },
  }
</script>

<style lang="scss">
  @import '@/assets/css/admin.scss';
  @import '@/assets/css/common.scss';
  @import '@/assets/css/admin-data.scss';
</style>
